<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
    <title>Document</title>

</head>

<body>
    <div class="huawei">
        <div class="lfet">
            <div class="root">
                <div class="leftlis">
                    <ul>
                        <li><a href="#">华为官网</a></li>
                        <li><a href="#">荣耀官网</a></li>
                        <li><a href="#">软件应用</a></li>
                        <li><a href="#">花粉俱乐部</a></li>
                        <li><a href="#">Select Region</a></li>
                    </ul>
                </div>
                <div class="root1">
                    <ul>
                        <li><a href="#">登录 </a></li>
                        <li><a href="#">注册 </a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">V码(优购码)</a></li>
                        <li><a href="#">手机版</a></li>
                        <li><a href="#">网站导航 </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 华为专区 -->
        <div class="zone">
            <div style="display: flex;">
                <div>
                    <img style="width: 150px;height: 46px;" src=" ./images/logo.huawei.png" alt="">
                </div>
                <div class="RoundedCorners">商城首页</div>
            </div>
            <div>
                <img style="width: 100px;height: 100px;" src="./images/qrcode_vmall_app01.png" alt="">
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="glory">
            <div class="glory-left">
                <ul style="margin-left: 333px;">
                    <li><a href="#">手机</a></li>
                    <li><a href="#">HUAWEI Mate系列</a></li>
                    <li><a href="#">平板 & 穿戴</a></li>
                    <li><a href="#">平板电脑 手环/手表</a></li>
                    <li><a href="#">笔记本电脑</a></li>
                    <li><a href="#">智能家居</a></li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <img src="./images/lb.jpg" alt="">
            <div class="cellPhone">
                <ul class="cellPhonelfet">
                    <li style="color: #fff;">全部商品</li>
                    <li> 手机
                        <p>HUAWEI Mate系列</p>
                    </li>
                    <li> 全部商品
                        <p>HUAWEI Mate系列</p>
                    </li>
                    <li> 电脑笔记
                        <p>HUAWEI Mate系列</p>
                    </li>
                    <li> 全部商品
                        <p>HUAWEI Mate系列</p>
                    </li>
                    <li> 通用配件
                        <p>HUAWEI Mate系列</p>
                    </li>
                    <li> 全部商品
                        <p>HUAWEI Mate系列</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 手机分类 -->
        <div class="classify">
            <div>
                <img src="./images/01.jpg" alt="">
            </div>
            <div>
                <img src="./images/02.jpg" alt="">
            </div>
            <div>
                <img src="./images/03.jpg" alt="">
            </div>
            <div>
                <img src="./images/04.jpg" alt="">
            </div>
        </div>
        <!-- 手机分类2 -->
        <div class="classifylist">
            <div style="display: flex;">
                <div class="aligncenter">
                    <p>HUAWEI P10 Plus</p>
                    <p style="color: #c7bfba; font-size: 14px;">金属钻雕工艺</p>
                    <p style="color: #c41729;">￥4388</p>
                </div>
                <div><img src="./images/011.png" alt=""></div>
            </div>
            <div style="display: flex;">
                <div class="aligncenter">
                    <p>HUAWEI P10 Plus</p>
                    <p style="color: #c7bfba; font-size: 14px;">金属钻雕工艺</p>
                    <p style="color: #c41729;">￥4388</p>
                </div>
                <div>
                    <img src="./images/022.png" alt="">
                </div>
            </div>
            <div style="display: flex;">
                <div class="aligncenter">
                    <p>HUAWEI P10 Plus</p>
                    <p style="color: #c7bfba; font-size: 14px;">金属钻雕工艺</p>
                    <p style="color: #c41729;">￥4388</p>
                </div>
                <div>
                    <img src="./images/033.png" alt="">
                </div>
            </div>
        </div>
        <!-- 服务区域 -->
        <div class="dashed"></div>
        <div class="Serve">
            <ul class="Serveleft">
                <li>
                    <h5></h5>
                    <p>价格亲民</p>
                </li>
                <li>
                    <h5></h5>
                    <p>物流快捷</p>
                </li>
                <li>
                    <h5></h5>
                    <p>品质新鲜</p>
                </li>
                <li>
                    <h5></h5>
                    <p>售后无忧</p>
                </li>
            </ul>
        </div>
        <div style="margin-top: 14px;" class="dashed"></div>
        <!-- 帮助 -->
        <div class="helplsite">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">支付方式</a></dd>
                <dd><a href="#">售后规则</a></dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd><a href="#">配送运费</a></dd>
                <dd><a href="#">配送范围</a></dd>
                <dd><a href="#">配送时间</a></dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">平台规则</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">问题反馈</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">退款说明</a></dd>
                <dd><a href="#">取消订单</a></dd>
            </dl>
            <dl>
                <dt>服务热线</dt>
                <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
                <dd><a href="#">客服电话 400-0000-000</a></dd>
                <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
            </dl>
        </div>
        <div style="margin-top: 14px;" class="dashed"></div>
        <!-- 各大官网 -->
        <div class="helplsitestr">
            <div style="font-size: 14px;color: #969696;">友情链接： | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 | 莫塞尔商城 | 爱旅官网 | 华为应用市场 |
                万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 |
                智能电视 | UC浏览器 |
            </div>
            <div style="font-size: 14px;color: #969696;">
                中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇
                | 安卓市场 |
            </div>
            <p style="font-size: 14px;color: #969696;">
                阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic
                | 携程租车 | <a href="www.http.baidu.com">申请链接 >></a>
            </p>
            <p style="font-size: 14px;color: #969696;">
                隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利
            </p>
            <p style="font-size: 14px;color: #969696;">
                公安备案 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2015] 1599-026号
            </p>
            <div class="helplsitestrhelp">
                <img src="./images/55.png" alt="">
                <img src="./images/666.png" alt="">
                <img src="./images/777.png" alt="">
                <img src="./images/99.jpg" alt="">
                <!-- <img src="./images/88.png" alt=""> -->
            </div>
        </div>
        <!-- 底部图片 -->

    </div>
    </div>
</body>

</html>